<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.org/ui">
    <h:head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <link rel="shortcut icon" href="images/logo W.jpg" />
        <title>Work to Worker</title>
        <style>
            a:link {text-decoration:none;}
            #menudiv2:hover{background-color: #FF6600;color: #1A3665}
        </style>  
        <style type="text/css">
            @font-face {
                font-family: "jokerman";
                src: url('font/VIVALDII.TTF') format("truetype");
            }
            @media screen and (-webkit-min-device-pixel-ratio:0)
            {
                #fix1 { margin-top: 0px }
                #fix2 { margin-top: 20px}
                #fix3 { margin-top: 10px}
                #lg2{margin-top: 15px}
            }
            @-moz-document url-prefix()
            {
                #fix1 { margin-top: -20px }
                #fix2 { margin-top: 20px}
                #lg1 {margin-top: 3px}
                #lg2{margin-top: 19px}
            }
        </style>
    </h:head>
    <h:body style="background-color:  #1A3665">
        <div style="width: 1000px;margin: auto;margin-top: 20px;background-color: white;border-radius: 10px;-moz-border-radius: 10px">
            <ui:include src="headertemplate.xhtml" />
            <div style="width: 600px;height: 300px;background-color: white;border-radius: 10px;-moz-border-radius: 10px;border: 1px;border-style: solid;margin-left: 200px;margin-top: 30px">
                <ul>
                    <li style="display: inline-block;width: 200px">
                        <img src="images/PhotoShare.png" width="195" height="260" alt="Untitled-5"/>

                    </li>
                    <li id="fix3" style="display: inline-block;vertical-align: top;margin-left: -50px">
                        <ul>
                            <li style="list-style: none;color: #1A3665;font-size:30px;font-weight: bold;margin-left: 150px"> <h:outputText value="#{msg['global.login']}" /> </li>
                        </ul>                      
                        <h:form>
                            <p:growl id="growl" showDetail="true" sticky="true" />
                            <ul id="fix2">
                                <li style="display: inline-block;color: red;font-weight: bold;vertical-align: top;text-align: right;width: 160px;margin-left: -30px">
                                    <ul>
                                        <li style="list-style: none"> <h:outputText value="#{msg['global.username']}" /> :</li>
                                        <li style="list-style: none;margin-top: 22px"> <h:outputText value="#{msg['global.password']}" /> :</li>
                                    </ul>
                                </li>
                                <li style="display: inline-block;margin-left: -25px">
                                    <ul>
                                        <li style="list-style: none" id="lg1"><h:inputText value="#{loginBean.username}" /></li>
                                        <li style="list-style: none;" id="lg2"><h:inputSecret value="#{loginBean.password}" /></li>
                                    </ul>
                                </li>
                            </ul>
                            <ul style="margin-top: 20px;margin-left: 150px">
                                <li style="display: inline"><h:selectBooleanCheckbox value="#{loginBean.rememberMe}"/></li>
                                <li style="display: inline;color: red"><h:outputText value="#{msg['global.remember_me']}" /></li>
                            </ul>   
                            <ul style="margin-top: 20px;margin-left: 150px">
                                <li style="list-style: none">
                                    <h:commandButton value="#{msg['global.login']}" action="#{loginBean.login()}" actionListener="#{loginBean.loginListener()}" style="border-style: none;font-weight: bold;background-color: #1A3665;color: white;height: 30px;width:100px;cursor: pointer" />
                                </li>
                            </ul>
                        </h:form>
                        <ul style="margin-left: 110px;margin-top: 10px">
                            <li style="list-style: none;"><a href="" style="text-decoration: none;color: red"> <h:outputText value="#{msg['global.Forgot_password']}" /> </a></li>
                        </ul>
                    </li>
                </ul>
            </div>
            <br/>
            <br/>
        </div>
        <div style="color: white; height: 100px;border-radius: 10px;-moz-border-radius: 10px;border: 1px;border-style: solid;border-color: white;margin-top: 20px">
            <div style="text-align: right; padding-top: 20px;padding-right: 30px">
                Copyright © by Group 1
                <br />
                Project Name : Work to Worker
                <br />
                Member in Group : Mr Bùi Hồng Hải , Mr Nguyễn Văn Cường , Mr Nguyễn Nhất Linh , Mr Lưu Thế Thông , Mr Trần Trung Hiếu
            </div>
        </div>
    </h:body>
</html>

